<template>
  <div>
    <el-card>
      <template #header>
        <div class="card-header">
          <span><strong>已完成的需求</strong></span>
          <el-dropdown @command="handleCommand" trigger="click">
            <el-button icon="MoreFilled" text></el-button>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="refresh">刷新</el-dropdown-item>
                <el-dropdown-item command="edit">编辑</el-dropdown-item>
                <el-dropdown-item command="hide">隐藏</el-dropdown-item>
                <el-divider />
                <el-dropdown-item command="add">添加卡片</el-dropdown-item>
                <el-dropdown-item command="restore">恢复默认</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </template>
      <div class="card-body">
        <slot></slot>
      </div>
    </el-card>

    <y-dialog v-model="open" :title="title" width="1000px" append-to-body>
      <el-form
        ref="addCardRef"
        :model="form"
        size="default"
        label-width="120px"
      >
        <el-row type="flex" justify="center" align="middle">
          <el-col :span="15">
            <el-form-item label="模块" prop="product">
              <el-select
                :loading="loadingPro"
                @visible-change="getProductOptions"
                @change="changeProductOption"
                v-model="form.product"
                style="width: 100%"
                placeholder="请选择所属模块"
                filterable
                clearable
              >
                <el-option
                  v-for="item in productOptions"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" justify="center" align="middle">
          <el-col :span="15">
            <el-form-item label="卡片" prop="product">
              <el-select
                :loading="loadingPro"
                @visible-change="getProductOptions"
                @change="changeProductOption"
                v-model="form.product"
                style="width: 100%"
                placeholder="请选择所属卡片"
                filterable
                clearable
              >
                <el-option
                  v-for="item in productOptions"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" justify="center" align="middle">
          <el-col :span="15">
            <el-form-item label="卡片名称" prop="name">
              <el-input v-model="form.name" placeholder="请输入卡片名称" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </y-dialog>
  </div>
</template>

<script setup name="MenuCard">
import { ElMessage } from "element-plus";

const { proxy } = getCurrentInstance();
const {} = proxy.useDict();

const open = ref(false);
const title = ref("");

const emits = defineEmits(["cardRefresh"]);

/** 刷新卡片操作 */
function cardRefresh() {
  proxy.$emit("cardRefresh");
}

/** 新增卡片操作 */
function handleAdd() {
  open.value = true;
  title.value = "添加卡片";
}

/** 编辑卡片操作 */
function handleEdit() {}

/** 隐藏卡片操作 */
function handleHide() {}

/** 卡片事件触发 */
function handleCommand(command) {
  ElMessage(`click on item ${command}`);
  switch (command) {
    case "add":
      handleAdd();
      break;
    default:
      cardRefresh();
      break;
  }
}
</script>
